<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		div {
            width:80px;
            height:80px;
            border:2px black dashed;
            float:left;
            margin-left:10px;
        }
        #yi {
           position:relative;
           top:100px;
           left:-360px;
        }
	</style>
	<body>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<p id="yi"></p>
	</body>
	<script type="text/javascript">
		var oDiv = document.getElementsByTagName("div")
		var op = document.getElementById("yi")
		
		for (var i = 0; i < oDiv.length; i++) {
			function a () {
				var x = i;
				return function () {
					var r = parseInt(Math.random()*256);
					var g = parseInt(Math.random()*256);
					var b = parseInt(Math.random()*256);
					oDiv[x].style.background = 'rgb('+r+','+g+","+b+")";
					op.innerHTML = x;
				}
			}
			oDiv[i].onclick=a();
		}
		
		
	</script>
</html>
